<template>
  <div class="app-container" style="padding: 0">
    <el-select class="main-select-tree" ref="treeSelect" v-model="value" style="width: 100%" clearable
               @clear="handleClear">
      <el-input v-model="filterValue" placeholder="请输入关键词进行过滤" clearable
                style="width: 220px; margin-left: 10px;margin-bottom: 10px;"/>
      <el-option v-for="item in formdata"></el-option>

    </el-select>
  </div>
</template>
<script setup>
export default {
  props: {
    treeData: Array,
  },
  data() {
    return {
      value: '',
      filterValue: '',
    }
  },
  watch: {
    filterValue(val) {
      this.$refs.treeSelect.filter(val)
    }
  },
  methods: {
    handleFilter(value, data) {
      if (!value) {
        return true
      }
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(node) {
      this.value = node.id
      this.$refs.treeSelect.blur()
      this.$emit('update:selectValue', node.label)
    },
    handleClear() {
      this.$emit('update:selectValue', '')
      const tree = this.$refs.treeSelect
      tree.setCurrentKey(null);
    },
    handleTreeData(data) {
      let options = [];
      const formatDataRecursive = (data) => {
        data.forEach(item => {
          options.push({label: item.label, value: item.id})
          if (item.children && item.children.length > 0) {
            formatDataRecursive(item.children);
          }
        })
      }
      formatDataRecursive(data)
      return options;
    }
  }
}
</script>
<style scoped lang="scss">

</style>
